﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对话框-dialog</title>
		<link rel="shortcut icon" href="/public/image/favicon.png">
		<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="/public/style/common.css">
		<style type="text/css">
			button{
				font-family: "Microsoft Yahei",Arial,Helvetica;
			}
			.button{
				margin-bottom:20px;
			}
			.dialog .widget-container{
				position:relative;
				width:320px;
				height:200px;
				background:#fff;
			}
			.dialog .widget-head{
				position: relative;
				height:40px;
				padding-left:8px;
				background:#cee1ee;
				line-height:40px;
			}
			.dialog .widget-head a{
				position:absolute;
				top:0;
				right:0;
				width:40px;
				height:40px;
				line-height:40px;
				text-align:center;
				cursor:pointer;
			}
			.dialog .widget-body{
				height:100px;
				padding:10px;
				line-height:100px;
				text-align:center;
			}
			.dialog .widget-foot{
				height:40px;
				padding:0 20px;
				line-height:40px;
				text-align:right;
			}
			.dialog .widget-foot button{
				width:80px;
				height:22px;
				border:none;
				line-height:22px;
				background:#cee1ee;
				outline:none;
				cursor:pointer;
			}
		</style>
		<script type="text/javascript" src="/public/script/jquery.min.js"></script>
		<script type="text/javascript" src="/code/jquery.dialog.js"></script>
	</head>
	<body>
		<div class="header">
            <a href="https://github.com/mumuy/widget" target="_blank">项目地址</a>
            <a href="/">返回首页</a>
        </div>
		<div class="main">
			<button id="btn1" class="button">打开对话框</button>
			<div class="dialog dialog1">你确定我够帅吗？</div>
			<div class="code">
				<p>
				$(".dialog1").dialog({<br/>
					'title':'警告',<br/>
					'buttons':{<br/>
						'确定':function(api){<br/>
							api.close();<br/>
						}<br/>
					}<br/>
				},function(api){<br/>
					$('#btn1').click(function(){<br/>
						api.open();<br/>
					});<br/>
				});
				</p>
			</div>
			<script type="text/javascript">
				$(".dialog1").dialog({
					'title':'警告',
					'buttons':{
						'确定':function(api){
							api.close();
						}
					}
				},function(api){
					$('#btn1').click(function(){
						api.open();
					});
				});
			</script>
			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>$(selector).dialog(options,callback(api));</p>
				</div>
				<h2>options参数</h2>
				<table>
					<thead>
						<tr>
							<th width="150">参数</th>
							<th width="120">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>content</td>
							<td>空</td>
							<td>对话框内容</td>
						</tr>
						<tr>
							<td>title</td>
							<td>空</td>
							<td>对话框标题</td>
						</tr>
						<tr>
							<td>opacity</td>
							<td>0.5</td>
							<td>对话框遮罩层透明度</td>
						</tr>
						<tr>
							<td>autoOpen</td>
							<td>false</td>
							<td>是否自动开启对话框</td>
						</tr>
						<tr>
							<td>isModel</td>
							<td>true</td>
							<td>是否为模式兑换</td>
						</tr>
						<tr>
							<td>buttons</td>
							<td>
								空
							</td>
							<td>自定义按键</td>
						</tr>
						<tr>
							<td>beforeOpen(api)</td>
							<td>
								[无]
							</td>
							<td>打开窗口前事件处理，api为方法接口</td>
						</tr>
						<tr>
							<td>afterClose(api)</td>
							<td>
								[无]
							</td>
							<td>关闭窗口后事件处理，api为方法接口</td>
						</tr>
					</tbody>
				</table>
				<h2>callback(api)参数</h2>
				<table>
					<thead>
						<tr>
							<th width="200">方法</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>open()</td>
							<td>打开对话框</td>
						</tr>
						<tr>
							<td>close()</td>
							<td>关闭对话框</td>
						</tr>
						<tr>
							<td>resize()</td>
							<td>对话框形状自动调整</td>
						</tr>
						<tr>
							<td>setTitle()</td>
							<td>设置对话框标题</td>
						</tr>
						<tr>
							<td>setContent()</td>
							<td>设置对话框内容</td>
						</tr>
						<tr>
							<td>getButtons()</td>
							<td>获取按键对象</td>
						</tr>
						<tr>
							<td>isOpen()</td>
							<td>获取对话框是否打开状态</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div style="display: none;">
			<script src="https://s11.cnzz.com/z_stat.php?id=1260218562&web_id=1260218562"></script>
		</div>
	</body>
<html>
